<template>
  <div class="contract_information">
    <!-- 新增弹框 -->
    <div class="new_add">
      <modelBox :show="add_show">
        <div class="add_lists">
          <div class="flex flexR add_lists_title">
            <div>新增</div>
            <div class="el-icon-close cp" @click="close_Model"></div>
          </div>

          <div class="content_view">
            <!-- 基本信息 -->
            <div class="basic_information_top">
              <viewTitle :title="'基本信息'" :border="false"></viewTitle>
            </div>
            <div class="basic_information">
              <!-- 服务商名称  签约日期 -->
              <div class="flex flexR basic_information_item">
                <div class="flex basic_information_items">
                  <div class="Textl title">服务商名称:</div>
                  <div>纳呗测试服务商</div>
                </div>
                <div class="flex basic_information_items">
                  <div class="Textl title">签约日期:</div>
                  <div>
                    <el-date-picker
                      v-model="contract_date"
                      type="datetimerange"
                      :default-time="['0:00:00','23:59:59']"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </div>
                </div>
              </div>
              <!-- 阶梯累计类型  标准充值费率 -->
              <div class="flex flexR basic_information_item">
                <div class="flex basic_information_items">
                  <div class="Textl title">阶梯累计类型:</div>
                  <div>
                    <el-select v-model="accumulative_type" clearable placeholder="请选择">
                      <el-option
                        v-for="item in accumulative_type_list"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="flex basic_information_items">
                  <div class="Textl title">标准充值费率:</div>
                  <div>
                    <el-input placeholder="请输入内容" v-model="standard_rate" clearable></el-input>
                  </div>
                </div>
              </div>
              <div class="uploading_list">
                <div class="flex">
                  <el-button slot="trigger" type="primary">选取文件</el-button>

                  <el-button style="margin-left: 10px;" type="success" @click="submitUpload">上传到服务器</el-button>
                  <el-button>批量导入模板下载</el-button>
                </div>
                <div slot="tip" class="el-upload__tip">上传文件只能是 xls/xlsx 格式，且不超过500kb</div>
              </div>
            </div>

            <!-- 费率政策 -->
            <div class="rate_policy_title flex flexR">
              <viewTitle :title="'阶梯费率政策'" :border="false"></viewTitle>
              <div class="add_and_subtract flex flexR">
                <!-- 加 减 -->
                <div class="add">+</div>
                <div class="subtract">-</div>
              </div>
            </div>
            <div class="rate_policy flex flexC" 
            :style="{marginTop:index==0?0:'15px'}"
            v-for="(item,index) in policy_list"  v-bind:key="index"> 
              <div class="flex flexR rate_policy_list">
                <div class="flex center rate_policy_item">
                  <el-input placeholder="请输入内容" v-model="standard_rate" clearable></el-input>
                  <div  class="rate_policy_item_title">元 -</div>
                </div>
                <div class="flex center rate_policy_item">
                  <el-input placeholder="请输入内容" v-model="standard_rate" clearable></el-input>
                  <div  class="rate_policy_item_title">元</div>
                </div>
                <div class="flex center rate_policy_item">
                  <div class="rate_policy_item_title">费率</div>
                  <el-input placeholder="请输入内容" v-model="standard_rate" clearable></el-input>
                </div>
              </div>
            </div>

            <!-- 确认 取消 -->
            <div class="Confirm_cancel flex flexR center">
              <el-button type="primary">确定</el-button>
              <el-button @click="close_Model">取消</el-button>
            </div>
          </div>
        </div>
      </modelBox>
    </div>

    <div class="flex flexR billing_information_top">
      <viewTitle :title="'已签约服务商'" :border="false"></viewTitle>
       <div></div>
      <div class="billing_information_top_btn" v-if="0"  @click="new_add">新增</div>
    </div>
    <!-- 已签约服务商列表 -->
    <div class="sign_list">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="getRowClass"
        :select-on-indeterminate="true"
        :fit="true"
        :lazy="true"
        border
      >
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="facilitator_name" label="服务商名称" width="180"></el-table-column>
        <el-table-column prop="protocol_start_time" label="协议开始日期"></el-table-column>
        <el-table-column prop="protocol_end_time" label="协议终止日期"></el-table-column>
        <el-table-column prop="standard_rate" label="标准充值费率"></el-table-column>
        <el-table-column prop="address" fixed="right" label="操作">
          <div class="table_operation"  slot-scope="scope">
            <el-button type="primary"  @click="down_agreement(scope.row)"> 下载协议</el-button>
          </div>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      add_show: false, // 新增弹框展示
      contract_date: false, // 签约日期
      standard_rate: "", // 标准费率
      accumulative_type: "", // 累计类型
      accumulative_type_list: [] ,//  累计类型列表
      policy_list:[1,1],             //  政策列表   加减
      pagination:{},                 //  签约信息-分页
    };
  },
  mounted() {
       this.getData();
  },
  created() {},
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    // 新增
    new_add() {
      this.add_show = true;
    },
    close_Model() {
      this.add_show = false;
    },
    submitUpload(){},
    getData(){
      let data = this.$api.sendSync(this.$mapapi.e_enterpriseSignFacilitator, {
      });
      if (data.code != 200&&data.code!=501) {
        this.$message.error(data.msg);
        return;
      } 
      this.tableData=data.data.data||[];
      this.pagination=data.data.pagination;
    },
    // 下载协议
    down_agreement(row){
          this.$import_excal(row.protocol_img||'')
    }
  }
};
</script>


<style lang="less"  :scope="true">
.contract_information {
  //  新增
  .new_add {
    .add_lists {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 900px;
      height: 420px;
      background: #ffffff;
      z-index: 200;
      margin-left: -450px;
      margin-top: -210px;
      font-size: 14px;
      .content_view {
        overflow-y: auto;
        height: 365px;
      }
      .basic_information_top {
        width: 97%;
        margin: 0 auto;
      }

      .rate_policy_title {
        justify-content: space-between;
        -moz-box-align: center;
        -webkit-box-align: center;
        // -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -moz-box-pack: center;
        -webkit-box-pack: center;
        // -ms-flex-pack: center;
        width: 97%;
        margin: 0 auto;
        .add_and_subtract {
          width: 80px;
          justify-content: space-between;
          .add {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            line-height: 20px;
            text-align: center;
            border: 1px solid #baabf4;
            color: #baabf4;
          }
          .subtract {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            line-height: 20px;
            text-align: center;
            border: 1px solid #baabf4;
            color: #baabf4;
          }
        }
      }
      .rate_policy {
        width: 92%;
        min-height: 50px;
        margin: 0 auto;
        border: 1px solid #f1f3f4;
        max-height: 250px;
        height: 55px;
        justify-content: space-around;
        .rate_policy_list {
          justify-content: space-around;
          -moz-box-align: center;
          -webkit-box-align: center;
          // -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
          -moz-box-pack: center;
          -webkit-box-pack: center;
          // -ms-flex-pack: center;
          .rate_policy_item{
            width: 220px;
            .rate_policy_item_title{
              width: 50px;
              height: 50px;
              line-height: 50px;
              
            }
          }
        }
      }

      .basic_information {
        width: 92%;
        min-height: 50px;
        margin: 0 auto;
        border: 1px solid #f1f3f4;
        max-height: 250px;
        overflow-y: auto;
        .basic_information_items {
          -moz-box-align: center;
          -webkit-box-align: center;
          // -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
          -moz-box-pack: center;
          -webkit-box-pack: center;
          // -ms-flex-pack: center;
          width: 350px;
          div {
            .el-select {
              width: 100%;
            }
            input {
              width: 100%;
            }
          }
          .title {
            width: 130px;
          }
          .el-date-editor {
            width: 280px;
          }
        }
      }

      .add_lists_title {
        width: 95%;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        margin: 0 auto;
        height: 55px;

        .el-icon-close {
          font-weight: bold;
        }
      }

      .add_input_lists {
        margin-left: 30px;
        width: 550px;

        .add_input_lists_item {
          flex: 1;

          input {
            width: 100%;
          }
          .el-select {
            width: 100%;
          }
        }

        .add_input_lists_title {
          width: 100px;
          text-align: right;
          margin-right: 25px;
        }

        .add_input_lists_title::before {
          content: "*";
          color: red;
        }

        .add_inputs {
          margin-top: 15px;
        }
      }

      .Confirm_cancel {
        margin-left: 55px;
        margin-top: 25px;
        margin-bottom: 25px;
        justify-content: space-around;
      }

      .deposit_selectBtn {
        justify-content: space-between;
        margin-left: 30px;
        width: 550px;
        margin-top: 35px;

        .all_deposit {
          color: #578ef4;
          text-decoration: underline;
          cursor: pointer;
        }
      }
      .uploading_list {
        background: #ffffff;
        display: flex;
        flex-direction: column;
        height: auto;
        margin: 10px 0;
      }
      .Import_prompt {
        background: #ffffff;
        padding-bottom: 20px;
        .Import_prompt_list {
          height: 150px;
          width: 80%;
          background: #d8e4ff;
          margin: 10px 25px;
          -moz-box-align: center;
          -webkit-box-align: center;
          // -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
          -moz-box-pack: center;
          -webkit-box-pack: center;
          // -ms-flex-pack: center;
          border-radius: 10px;
          .prompt_lists {
            height: 110px;
            justify-content: space-between;
            margin-left: 25px;
            font-size: 14px;
            .notice {
              color: #ff4c4c;
            }
          }
        }
      }
    }
  }

  .billing_information_top {
    -moz-box-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: space-between;
  }
  .billing_information_top_btn {
    width: 100px;
    text-align: right;
    height: 45px;
    line-height: 45px;
    color: #4280f2;
    cursor: pointer;
    margin-right: 50px;
  }
  .sign_list {
  }
}
</style>